<template>
  <div class="box-item">
    <div class="item-left"><titles :title="props.info.text" /> <textMax :data="props.info.remarks" :maxLen="80" /></div>
    <div class="item-right">
      <t-row v-for="(item, index) in props.info.children" :key="index">
        <t-col :span="12" v-if="index % 2 == 0">
          <div class="right-box">
            <img
              @click="pathChild(item)"
              class="img-box child-margin"
              :src="urls + item.value + '?imageView2/1/w/300/h/300/format/webp'"
              alt=""
              v-if="item.value"
            />

            <img
              @click="pathChild(item)"
              class="img-box child-margin"
              src="http://101.34.143.36:8890/api/image/387939155165253/h_300,w_300"
              alt=""
              v-else
            />
            <div class="text-box child-margin">
              <span
                class="title"
                :style="{
                  fontSize: store.styleInfo.mintitleSize,
                  fontFamily: store.styleInfo.textFamily,
                  color: store.styleInfo.fontColor,
                }"
                >{{ item.text }}</span
              >
              <span
                class="left-title1"
                :style="{
                  fontSize: store.styleInfo.contentSize,
                  fontFamily: store.styleInfo.textFamily,
                  color: store.styleInfo.fontColor,
                }"
                >{{ item.remarks }}</span
              >
            </div>
          </div>
        </t-col>
        <t-col :span="12" v-else>
          <div class="right-box">
            <div class="text-box">
              <span
                class="title"
                :style="{
                  fontSize: store.styleInfo.mintitleSize,
                  fontFamily: store.styleInfo.textFamily,
                  color: store.styleInfo.fontColor,
                }"
                >{{ item.text }}</span
              >
              <span
                class="left-title1"
                :style="{
                  fontSize: store.styleInfo.contentSize,
                  fontFamily: store.styleInfo.textFamily,
                  color: store.styleInfo.fontColor,
                }"
                >{{ item.remarks }}</span
              >
            </div>
            <img
              @click="pathChild(item)"
              class="img-box"
              :src="urls + item.value + '?imageView2/1/w/300/h/300/format/webp'"
              alt=""
              v-if="item.value"
            />

            <img
              @click="pathChild(item)"
              class="img-box"
              src="http://101.34.143.36:8890/api/image/387939155165253/h_300,w_300"
              alt=""
              v-else
            />
          </div>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from '@/components/textMax/textMax.vue';
import { handlemouse } from '@/utils/minxin';
import { onMounted } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});
const pathChild = (e: any) => {
  store.setchildModel(e);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: {},
  });
};
onMounted(() => {});
</script>

<style lang="less" scoped>
@import './index.less';
.box-item {
  display: flex;
}
.item-left {
  display: flex;
  flex-direction: column;
  width: 280px;
  margin-right: 120px;
  height: 660px;
  padding: 123px 0;
  .title {
    margin-bottom: 120px;
  }
}
.item-right {
  flex: 1;
}
.right-box {
  width: 100%;
  display: flex;
}
.img-box {
  width: 50%;
  height: auto;
}
.text-box {
  width: 50%;
  display: flex;
  flex-direction: column;
  .title {
    margin: 32px 0;
    width: 100%;
    text-align: left;
    padding: 4px 0;
  }
  .left-title1 {
    width: 80%;
  }
}
.child-margin {
  margin-right: 50px;
}
</style>
